<template>
  <div class="m-side-bar">
    <details v-for="(value,key) in treeData" :key="key" open>
      <summary><dt>{{ key }}</dt></summary> 
      <dd v-for="(page,index) in value" v-if="value.length" :key="index">
        <a :class="{active:nowRoute==page.name}" @click="sideItemClick(page.path)">
          {{ page.name }}
        </a>
      </dd> 
    </details>
    <!-- <details open>
      <summary><dt>布局结构</dt></summary> 
      <dd><a>全局布局</a></dd>
      <dd><a>我的活动</a></dd>
      <dd><a>评价晒单</a></dd>
      <dd><a>购物助手</a></dd>
    </details> --> 
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'MSideBar',
  props: {
    treeData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      // nowRoute:this.$route.name
    }
  },
  computed: {
    nowRoute() {
      return this.$route.name
    }
  },
  created() {
    
  },
  mounted() {

  },
  methods: {
    sideItemClick(path) {
      this.$emit('on-listClick', path)
    } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
 
//@import "./rowCtrl"
@import "./sidebar"

</style>





